<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		canvas{border: 1px solid #333;}
	</style>
</head>
<body>
	<!-- canvas的宽度和高度，不能用css来调整，用属性来调整宽度和高度 -->
	<canvas width="600" height="400"></canvas>
	<script type="text/javascript">
		//拿到一张白纸
		let canvas=document.querySelector("canvas");
		
		//拿画笔
		let ctx= canvas.getContext("2d")

		//填充文本
		ctx.font="30px 微软雅黑";
		ctx.fillStyle="red"
		ctx.fillText("你好，西安",100,100)

		//描边文本
		ctx.font="30px 微软雅黑";
		ctx.strokeStyle="red"
		ctx.strokeText("你好，西安",100,100)


		//水平对齐
		ctx.moveTo(100,0)
		ctx.lineTo(100,400)
		ctx.stroke()

		ctx.font="20px 微软雅黑"
		// ctx.textAlign="center";    		//水平居中:center
		// ctx.textAlign="right";			//右侧对齐:right/end
		// ctx.textAlign="left";			//左侧对齐：left/start
		// ctx.textAlign="start"
		ctx.textAlign="end"

		ctx.fillText("你好西安",100,100)


		//竖直方向对齐
		ctx.moveTo(0,100)
		ctx.lineTo(600,100)
		ctx.stroke()

		ctx.font="30px 微软雅黑";
		ctx.textBaseline="middle"		//居中对齐
		ctx.textBaseline="top";			//顶部对齐
		ctx.textBaseline="bottom";			//底部对齐
		ctx.textBaseline="alphabetic"		//字母
		ctx.fillText("你好西安xX",100,100)



	</script>
</body>
</html>